<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.26</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="circuitCanvas" width="450" height="420"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px serif';

    // Helper function to draw a resistor (vertical)
    function drawResistor(x, y1, y2, label, labelPos) {
        const numZigzags = 6;
        const width = 10;
        const totalHeight = y2 - y1;
        const segmentHeight = totalHeight / (numZigzags + 2);

        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y1 + segmentHeight);
        for (let i = 0; i < numZigzags; i++) {
            ctx.lineTo(x + (i % 2 === 0 ? 1 : -1) * width, y1 + segmentHeight * (i + 1.5));
        }
        ctx.lineTo(x, y1 + segmentHeight * (numZigzags + 1));
        ctx.lineTo(x, y2);
        ctx.stroke();

        ctx.save();
        ctx.font = '20px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        if (labelPos === 'left') {
            ctx.textAlign = 'right';
            ctx.fillText(label, x - 15, (y1 + y2) / 2);
        } else { // right
            ctx.fillText(label, x + 15, (y1 + y2) / 2);
        }
        ctx.restore();
    }
    
    // Helper function for the resistor R with a superscript
    function drawResistorR(x, y1, y2) {
        const numZigzags = 6;
        const width = 10;
        const totalHeight = y2 - y1;
        const segmentHeight = totalHeight / (numZigzags + 2);

        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y1 + segmentHeight);
        for (let i = 0; i < numZigzags; i++) {
            ctx.lineTo(x + (i % 2 === 0 ? 1 : -1) * width, y1 + segmentHeight * (i + 1.5));
        }
        ctx.lineTo(x, y1 + segmentHeight * (numZigzags + 1));
        ctx.lineTo(x, y2);
        ctx.stroke();

        ctx.save();
        ctx.font = '20px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        const labelY = (y1 + y2) / 2;
        const startX = x + 15;
        ctx.fillText("R = 10", startX, labelY);
        ctx.font = '14px serif';
        ctx.fillText("4", startX + 58, labelY - 8);
        ctx.font = '20px serif';
        ctx.fillText(" Ω", startX + 66, labelY);
        ctx.restore();
    }


    // Helper function to draw an inductor (horizontal)
    function drawInductor(x1, y, x2, label) {
        const numCoils = 4;
        const radius = 10;
        const coilWidth = (x2 - x1 - 20) / numCoils;

        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x1 + 10, y);
        for (let i = 0; i < numCoils; i++) {
            ctx.arc(x1 + 10 + coilWidth * (i + 0.5), y, coilWidth/2, Math.PI, 0, false);
        }
        ctx.moveTo(x1 + 10 + coilWidth * numCoils, y);
        ctx.lineTo(x2, y);
        ctx.stroke();
        
        ctx.save();
        ctx.font = '20px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(label, (x1 + x2) / 2, y - 10);
        ctx.restore();
    }

    // Helper function to draw a DC voltage source (vertical)
    function drawVoltageSource(x, y1, y2, label) {
        const midY = (y1 + y2) / 2;
        const shortLine = 10;
        const longLine = 20;

        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, midY - longLine / 2);
        // Positive pole (top, longer line)
        ctx.moveTo(x - longLine, midY - 8); 
        ctx.lineTo(x + longLine, midY - 8);
        // Negative pole (bottom, shorter line)
        ctx.moveTo(x - shortLine, midY + 8); 
        ctx.lineTo(x + shortLine, midY + 8);
        ctx.moveTo(x, midY + longLine / 2 + 8);
        ctx.lineTo(x, y2);
        ctx.stroke();

        ctx.save();
        ctx.font = '20px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x + 25, midY);
        ctx.restore();
    }
    
    // Helper function to draw the ground symbol
    function drawGround(x, y) {
        const width1 = 30;
        const width2 = 20;
        const width3 = 10;
        const spacing = 5;

        ctx.beginPath();
        ctx.moveTo(x, y - 10);
        ctx.lineTo(x, y);
        ctx.moveTo(x - width1 / 2, y);
        ctx.lineTo(x + width1 / 2, y);
        ctx.moveTo(x - width2 / 2, y + spacing);
        ctx.lineTo(x + width2 / 2, y + spacing);
        ctx.moveTo(x - width3 / 2, y + 2 * spacing);
        ctx.lineTo(x + width3 / 2, y + 2 * spacing);
        ctx.stroke();
    }
    
    // Coordinates
    const yTop = 70;
    const yGround = 320;
    const xLeft = 80;
    const xMid = 180;
    const xInductorStart = 260;
    const xInductorEnd = 380;
    const contactRadius = 4;

    // --- Main Drawing ---
    
    // Bottom ground wire
    ctx.beginPath();
    ctx.moveTo(xLeft, yGround);
    ctx.lineTo(xInductorEnd, yGround);
    ctx.stroke();

    // Right vertical wire (L to ground)
    ctx.beginPath();
    ctx.moveTo(xInductorEnd, yTop);
    ctx.lineTo(xInductorEnd, yGround);
    ctx.stroke();

    // Left Branch
    const resistor1_y1 = yTop;
    const resistor1_y2 = 170;
    drawResistor(xLeft, resistor1_y1, resistor1_y2, "1 Ω", "right");
    drawVoltageSource(xLeft, resistor1_y2, yGround, "1V");

    // Middle Branch
    const resistorR_y1 = yTop + 20;
    drawResistorR(xMid, resistorR_y1, yGround);

    // Right Branch (Inductor)
    drawInductor(xInductorStart, yTop, xInductorEnd, "L = 1H");

    // Switch S
    // Pivot point S is where switch arm and inductor meet
    ctx.fillText("S", xInductorStart - 5, yTop - 10);
    
    // Switch arm to A
    ctx.beginPath();
    ctx.moveTo(xInductorStart, yTop);
    ctx.lineTo(xLeft, yTop);
    ctx.stroke();

    // Contact point A
    ctx.beginPath();
    ctx.arc(xLeft, yTop, contactRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("A", xLeft - 25, yTop + 5);

    // Contact point B
    ctx.beginPath();
    ctx.arc(xMid, resistorR_y1, contactRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("B", xMid - 25, resistorR_y1 + 5);

    // Current loop arrow (clockwise)
    const arrowCenterX = 275;
    const arrowCenterY = 200;
    const arrowRadius = 60;
    const startAngle = 0.6 * Math.PI;
    const endAngle = 0.5 * Math.PI;

    ctx.beginPath();
    ctx.arc(arrowCenterX, arrowCenterY, arrowRadius, startAngle, endAngle, true); // true for clockwise
    ctx.stroke();

    // Arrowhead at the end point
    const angle = endAngle;
    const arrowSize = 12;
    const xArrow = arrowCenterX + arrowRadius * Math.cos(angle);
    const yArrow = arrowCenterY + arrowRadius * Math.sin(angle);
    const tangentAngle = angle - Math.PI / 2; // Tangent for clockwise arc

    ctx.save();
    ctx.translate(xArrow, yArrow);
    ctx.rotate(tangentAngle);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-arrowSize, arrowSize / 2.5);
    ctx.moveTo(0, 0);
    ctx.lineTo(-arrowSize, -arrowSize / 2.5);
    ctx.stroke();
    ctx.restore();

    // Ground Symbol
    drawGround(230, yGround);

    // Figure caption
    ctx.textAlign = 'center';
    ctx.fillText("Fig. 3.26", canvas.width / 2, yGround + 60);

</script>
</body>
</html>